<template>
    <div id="result-view">
        <el-dialog
            :title="titleCon"
            v-model="effectDialog" 
            draggable 
            :close-on-click-modal="false" 
            :fullscreen="true"
            :before-close="handleClose"
            :destroy-on-close="true"
            calss="set-dialog"
        >
            <div class="w-h-100 ver-flex pos-a set-w-h-100" style="box-sizing: border-box;">
                <div v-if="statusValue" style="box-sizing: border-box;">
                    <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                        <div style="" class="w-h-100 ver-flex">
                            <!-- <el-button class="icon-e" size="small" text type="primary">巡检点</el-button> -->
                            <el-table 
                                :data="list" 
                                class="w-h-100 set-xm-table" 
                                style="width: 100%" 
                                border 
                                v-loading="loading"
                                element-loading-background="rgba(0, 0, 0, 0.5)"
                            >
                                <el-table-column label="巡检项目"  align="left">
                                    <el-table-column width="120" label="查看隐患记录" :show-overflow-tooltip="true"  align="center">
                                        <template #default="scope">
                                            <el-radio-group v-model="selectedId" @change="handleChang(scope.row.l_SMSDCListId)">
                                                <el-radio class="set-label" :label="scope.$index"></el-radio>
                                            </el-radio-group>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="巡检任务名称"  align="center">
                                        <template #default="scope">
                                            <span v-if="scope.row.v_IPTaskName">{{ scope.row.v_IPTaskName }}</span>
                                            <span v-else> - </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="风险管控分析单元"  align="center">
                                        <template #default="scope">
                                            <span v-if="scope.row.v_AnalysisUnitName">{{ scope.row.v_AnalysisUnitName }}</span>
                                            <span v-else> - </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患排查内容"  align="center">
                                        <template #default="scope">
                                            <span v-if="scope.row.smsdcList.v_CheckContent">{{ scope.row.smsdcList.v_CheckContent }}</span>
                                            <span v-else> - </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="管控措施"  align="center">
                                        <template #default="scope">
                                            <span v-if="scope.row.smsdcList.v_DCMeasure">{{ scope.row.smsdcList.v_DCMeasure }}</span>
                                            <span v-else> - </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="所属风险分区"  align="center">
                                        <template #default="scope">
                                            <span v-if="scope.row.v_RiskPartitionName">{{ scope.row.v_RiskPartitionName }}</span>
                                            <span v-else> - </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患记录数"  align="center">
                                        <template #default="scope">
                                            <span v-if="scope.row.n_HiddenCount">{{ scope.row.n_HiddenCount }}</span>
                                            <span v-else> - </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="160" :show-overflow-tooltip="true" label="是否受控"  align="center">
                                        <template #default="scope">
                                            <span v-if="scope.row.isControlled === null" style="color: #E6A23C;">待巡检</span>
                                            <span v-if="scope.row.isControlled === true" style="color: #67C23A;">受控</span>
                                            <span v-if="scope.row.isControlled === false" style="color: #F56C6C;">不受控</span>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
                                <el-pagination
                                    v-model:currentPage="pageNo"
                                    v-model:page-size="pageSize"
                                    :total="totalRows"
                                    :page-sizes="[10, 20, 50, 100]"
                                    small
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    class="w-h-100"
                                />
                            </div>
                        </div>
                    </el-card>
                </div>

                <div style="box-sizing: border-box;" class="flex-1 pos-r">
                    <div class="pos-a w-h-100" style="box-sizing: border-box;">
                        <el-card class="box-card w-h-100" shadow="never">
                            <div style="" class="w-h-100 ver-flex">
                                <div class="flex-1 pos-r">
                                    <div class="pos-a w-h-100">
                                        <el-table 
                                            :data="hiddenList" 
                                            class="w-h-100" 
                                            :class="statusValue ? 'set-yh-table' : 'set-yh-table-other'"
                                            style="width: 100%" 
                                            border 
                                            v-loading="hiddenLoading" 
                                            element-loading-background="rgba(0, 0, 0, 0.5)"
                                        >
                                            <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患记录列表"  align="left">
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="巡检任务"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_IPTaskName">{{ scope.row.v_IPTaskName }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患排查人员"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_CheckUserName">{{ scope.row.v_CheckUserName }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患排查部门"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_CheckDeptName">{{ scope.row.v_CheckDeptName }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患分类"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_TypeName">{{ scope.row.v_TypeName }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="风险管控分析单元"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_AnalysisUnitName">{{ scope.row.v_AnalysisUnitName }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="巡检点名称"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_SMSDCListName">{{ scope.row.v_SMSDCListName }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="是否自定义隐患"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.isCustom" style="color:#E6A23C;">是</span>
                                                        <span v-else style="color:#F56C6C;">否</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患排查日期"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.d_CheckDate">{{ scope.row.d_CheckDate.split(' ')[0] }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患描述"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_Describe">{{ scope.row.v_Describe }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患级别"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_HiddenLevelName">{{ scope.row.v_HiddenLevelName }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患地点"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_Place">{{ scope.row.v_Place }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患部位"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_Part">{{ scope.row.v_Part }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患状态"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_StateName">{{ scope.row.v_StateName }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患分类"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_HiddenDangerClass">{{ scope.row.v_HiddenDangerClass }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>
                                            </el-table-column>
                                            <el-table-column width="130" label="操作" align="center" fixed="right">
                                                <template #default="scope">
                                                    <el-button @click="viewHandle(scope.row.id)" class="icon-e" icon="ele-View" size="small" text type="success">查看整改记录</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
            </div>
            <template #footer>
                <el-button @click="cancelUseClick">关 闭</el-button>
            </template>
        </el-dialog>
        <!-- 整改记录列表 -->
        <DetailModel
            :detailInfo="detailInfo"
            :MdetailDialog="MdetailDialog"
            labelWidth="200px"
            titleConInfo="整改记录列表"
            @cancelDetailClick="cancelDetailClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref , computed, watch, reactive } from 'vue';
import { ElButton, ElDialog } from 'element-plus';
import getTableData from '/@/utils/getTableData';
import { 
    SMSIPTaskContentPage,
    SMSHDHiddenList,
    SMSHDRectifyList,
} from '/@/api/centerControl/sms';
import DetailModel from '../detail-model.vue';

export default defineComponent( {
    name: 'result-view',
    components: { DetailModel },
    props: {
        effectDialog:{
            type: Boolean,
            default: false,
        },
        effectInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const statusValue = ref(true);
        const hiddenList = ref();
        const hiddenLoading = ref(false);
        let searchObj:any = reactive({});
        const selectedId = ref(null);

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('effectClick')
        }

        /*** 监听effectDialog的变化 */
        watch(() => props.effectDialog,(newVal) => {
            if(newVal){
                let getData = JSON.parse(props.effectInfo);
                selectedId.value = null;
                hiddenLoading.value = false;
                hiddenList.value = [];
                if(getData.state_val === 0){
                    titleCon.value = '查看隐患结果';
                    searchObj.l_IPTaskId = getData.id;
                    statusValue.value = true;
                }else{
                    titleCon.value = '查看其它隐患';
                    statusValue.value = false;
                    getYHlist();
                }
            }
        })

        /*** effectDialog 响应弹窗的关闭  */
        const effectDialog = computed(() => {
            return props.effectDialog
        })

        /*** 单选框事件 */
        const handleChang = (val: number) => {
            hiddenLoading.value = true;
            getYHlist(val);
        }

        /*** 获取隐患记录列表 */
        const getYHlist = async (id?: number) => {
            let param: any = {};
            param.onlyMyRecord = false;
            param.l_IPTaskId = JSON.parse(props.effectInfo).id;
            if(statusValue.value) param.l_SMSDCListId = id;
            param.isCustom = statusValue.value ? false : true;
            let res: any = await SMSHDHiddenList(param);
            if(res.success) hiddenList.value = res.data;
            hiddenLoading.value = false;
        }

        /*** 查看整改记录 */
        const viewHandle = (val: number) => {
            getDetailFun(val);
        }

        /*** ================================= 详情类数据操作 =================================  */
        const MdetailDialog = ref(false);
        const detailInfo = ref();
        /*** 获取详情接口数据 */
        const getDetailFun = async (id: number) => {
            let param: any = {};
            param.onlyMyRecord = false;
            param.l_HDHiddenId = id;
            let res: any = await SMSHDRectifyList(param); // 详情
            if(res.success){
                let setArr: any = [];
                let tableArr: any = [];
                if(res.data.length !== 0){
                    res.data.map((val: any) => {
                        let itemObj: any = {};
                        itemObj['第几次整改'] = val.n_Times ? val.n_Times : '-';
                        itemObj['隐患整改类型'] = val.v_TypeName ? val.v_TypeName : '-';
                        itemObj['整改期限'] = val.d_LimitTime ? val.d_LimitTime.split(' ')[0] : '-';
                        itemObj['是否现场整改'] = val.isSceneRectify ? '是' : '否';
                        itemObj['整改人员姓名'] = val.v_RectifyUserName ? val.v_RectifyUserName : '-';
                        itemObj['整改部门'] = val.v_RectifyDeptName ? val.v_RectifyDeptName : '-';
                        itemObj['整改措施'] = val.v_Measures ? val.v_Measures : '-';
                        itemObj['整改状态'] = val.v_StateName ? val.v_StateName : '-';
                        itemObj['是否整改转办'] = val.isRectificationShift ? '是' : '否';
                        itemObj['整改结果状态'] = val.n_RectificationState === 0 ? '已消除' : '未消除';
                        itemObj['整改日期'] = val.d_RectificationTime ? val.d_RectificationTime.split(' ')[0] : '-';
                        itemObj['整改文字描述'] = val.v_RectificationDescribe ? val.v_RectificationDescribe : '-';
                        itemObj['原因分析'] = val.v_Reason ? val.v_Reason : '-';
                        itemObj['复查部门'] = val.v_ReviewDeptName ? val.v_ReviewDeptName : '-';
                        itemObj['复查人员'] = val.v_ReviewUserName ? val.v_ReviewUserName : '-';
                        itemObj['复查日期'] = val.d_ReviewTime ? val.d_ReviewTime.split(' ')[0] : '-';
                        itemObj['复查是否转办'] = val.isReviewShift ? '是' : '否';
                        itemObj['复查结果'] = val.v_ReviewResultName ? val.v_ReviewResultName : '-';
                        itemObj['复查意见'] = val.v_ReviewOpinion ? val.v_ReviewOpinion : '-';
                        itemObj['验收部门'] = val.v_AcceptanceDeptName ? val.v_AcceptanceDeptName : '-';
                        itemObj['验收人员'] = val.v_AcceptanceUserName ? val.v_AcceptanceUserName : '-';
                        itemObj['是否验收转办'] = val.isAcceptanceShift ? '是' : '否';
                        itemObj['验收日期'] = val.d_AcceptanceTime ? val.d_AcceptanceTime.split(' ')[0] : '-';
                        itemObj['验收结果'] = val.v_AcceptanceStateName ? val.v_AcceptanceStateName : '-';
                        tableArr.push(itemObj);
                    });
                }
                setArr = [{
                    tableTitle: '整改记录',
                    type: 'table',
                    listData: tableArr,
                    minWidth: 200,
                }];
                detailInfo.value = setArr;
                MdetailDialog.value = true;
            }
        }
        /*** 详情 */
        const detailHandle = (id: number) => {
            getDetailFun(id);
        }
        /*** 详情关闭事件 */
        const cancelDetailClick = () => {
            MdetailDialog.value = false;
        }
        /*** ================================= 详情类数据操作 =================================  */

        return {
            ...getTableData(SMSIPTaskContentPage,{},searchObj),
            handleClose,
            cancelUseClick,
            titleCon,
            effectDialog,
            statusValue,
            hiddenList,
            hiddenLoading,
            viewHandle,
            handleChang,
            selectedId,
            
            // 详情
            MdetailDialog,
            detailHandle,
            detailInfo,
            cancelDetailClick,
        }
    },
} )
</script>
<style scoped lang="scss">
.set-w-h-100{
    height: calc(100vh - 114px);
}
.set-xm-table{
    :deep(.el-scrollbar__wrap){
        height: 20vh;
        overflow-y: auto;
    }
}
.set-yh-table{
    :deep(.el-scrollbar__wrap){
        height: 41vh;
        overflow-y: auto;
        // border: 1px solid red;
    }
}
.set-yh-table-other{
    :deep(.el-scrollbar__wrap){
        height: 76vh;
        overflow-y: auto;
        // border: 1px solid red;
    }
}
.set-label{
    :deep(.el-radio__label){
        display: none;
    }
}
:deep(.el-overlay){
    .el-overlay-dialog{
        .el-dialog{
            .el-dialog__body{
                padding: 0px !important;
            }
        }
    }
} 
:deep(.el-dialog__body){
    height: calc(100vh - 110px);
    max-height: none!important;
    overflow-y: hidden;
}
</style>